<template>
  <div>
    <doc-box v-for="(item, idx) in list" :key="idx" :title="item.title">
      <div slot="preview">
        <template v-if="typeof item.code === 'string'">
          <div v-html="item.code" :class="item.class"></div>
        </template>

        <template v-else>
          <div v-for="(txt, ti) in item.code" :class="item.class" :key="ti" v-html="txt"></div>
        </template>
      </div>

      <template slot="code">
        <template v-if="typeof item.code === 'string'">
          <code>{{ item.code }}</code>
        </template>

        <template v-else>
          <div>
            <code v-for="(txt, ti) in item.code" :key="ti">{{ txt }}</code>
          </div>
        </template>
      </template>
    </doc-box>
  </div>
</template>

<script>
import DocBox from '../components/DocBox'
export default {
  name: 'Class',
  components: {DocBox},
  data () {
    return {
      list: [
        {
          title: '提示文本',
          code: [
            `<div class="ke__tip">这是一条提示文本</div>`,
            `<div class="ke__tip inline">这是一条行内提示文本</div>`
          ]
        },
        {
          title: '浮动',
          code: [
            `<div class="pull-left">左浮动</div>`,
            `<div class="pull-right">右浮动</div>`
          ]
        },
        {
          title: '内间距',
          class: 'doc-padding',
          code: [
            `<div class="ke__padding">间距</div>`,
            `<div class="ke__padding-left">左间距</div>`,
            `<div class="ke__padding-right">右间距</div>`,
            `<div class="ke__padding-top">上间距</div>`,
            `<div class="ke__padding-bottom">下间距</div>`
          ]
        },
        {
          title: '外间距',
          class: 'doc-maring',
          code: [
            `<div class="ke__margin">间距</div>`,
            `<div class="ke__margin-left">左间距</div>`,
            `<div class="ke__margin-right">右间距</div>`,
            `<div class="ke__margin-top">上间距</div>`,
            `<div class="ke__margin-bottom">下间距</div>`
          ]
        },
        {
          title: '边框',
          class: 'doc-border',
          code: [
            `<div class="ke__border">边框</div>`,
            `<div class="ke__border-left">左边框</div>`,
            `<div class="ke__border-right">右边框</div>`,
            `<div class="ke__border-top">上边框</div>`,
            `<div class="ke__border-bottom">下边框</div>`
          ]
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
  .doc-padding {
    display: inline-block;
    background-color: #399EE4;
    color: #fff;
    margin: 10px;
  }
  .doc-maring {
    display: inline-block;
    background: #399EE4;
    margin: 10px;
    /deep/ div {
      background-color: #fff;
    }
  }
  .doc-border {
    margin: 10px;
  }
</style>
